<template>
	<view class="df_fee_page">
		<view class="fee_page_head">
			<!-- 水费 -->
			<image v-if="pageType == 'water'" class="head_img" :src="'https://community.chuangxiangdianli.com/images/propertyImg/shui_bg@2x.png'"
			 mode=""></image>
			<!-- 电费 -->
			<image v-if="pageType == 'electric'" class="head_img" :src="'https://community.chuangxiangdianli.com/images/propertyImg/dian_bg.png'"
			 mode=""></image>
			<!-- 物业费 -->
			<image v-if="pageType == 'property'" class="head_img" :src="'https://community.chuangxiangdianli.com/images/propertyImg/wuye_bg.png'"
			 mode=""></image>
			<view class="head_top">
				<view class="head_top_fl">
					<image v-if="pageType == 'water'" class="head_top_img" :src="'https://community.chuangxiangdianli.com/images/propertyImg/shui_1@2x.png'"
					 mode=""></image>
					<image v-if="pageType == 'electric'" class="head_top_img" :src="'https://community.chuangxiangdianli.com/images/propertyImg/dian_1@2x.png'"
					 mode=""></image>
					<image v-if="pageType == 'property'" class="head_top_img" :src="'https://community.chuangxiangdianli.com/images/propertyImg/wuye@2x.png'"
					 mode=""></image>
					<view class="head_top_z">
						<text v-if="pageType == 'water'">水费</text>
						<text v-if="pageType == 'electric'">电费</text>
						<text style="color: #c7d6e4; font-size: 26rpx;">户号: {{costDetails.meter_code || 0}}</text>
					</view>
				</view>
				<view class="head_top_fr">
					<image :src="'https://community.chuangxiangdianli.com/images/propertyImg/juxing.png'" mode=""></image>
					<text class="fr_txt">{{feeTime || 0}}</text>
				</view>
			</view>
			<view class="head_con">
				<view class="con_fl">
					<text v-if="pageType == 'water' || pageType == 'electric'">当前示值(度)</text>
					<text v-if="pageType == 'water'">当月累计水量</text>
					<text v-if="pageType == 'electric'">当月累计电量</text>
					<text>{{costDetails.total_data.total_count || 0}}</text>
				</view>
				<view class="con_fr">
					<text v-if="pageType == 'water'">已用水费(元)</text>
					<text v-if="pageType == 'electric'">已用电费(元)</text>

					<text v-if="pageType == 'water'">当月累计水费</text>
					<text v-if="pageType == 'electric'">当月累计电费</text>
					<text>{{costDetails.total_data.total_cost || 0}}</text>
				</view>
			</view>
		</view>

		<view class="fee_nav">
			<view class="nav_item" @click="goToPaymentRecord">
				<image class="nav_it_img" :src="'https://community.chuangxiangdianli.com/images/propertyImg/hzangdan.png'" mode=""></image>
				<text>账单记录</text>
			</view>
			<view class="nav_item" v-if="pageType != 'property'" @click="goToStatistics">
				<image class="nav_it_img" :src="'https://community.chuangxiangdianli.com/images/propertyImg/tongji.png'" mode=""></image>
				<text v-if="pageType == 'water'">用水统计</text>
				<text v-if="pageType == 'electric'">用电统计</text>
			</view>
		</view>

		<view class="fee_data">
			<text class="fee_data_tit">{{currYear}}年数据</text>
			<view class="frr_data_in">
				<view class="data_in_item" v-if="pageType != 'property'">
					<image :src="'https://community.chuangxiangdianli.com/images/propertyImg/shuiliang.png'" mode=""></image>
					<view class="in_item_con">
						<text class="in_item_one" v-if="pageType == 'water'">总用水量(立方)</text>
						<text class="in_item_one" v-if="pageType == 'electric'">总用电量(度)</text>
						<text class="in_item_tow">{{costDetails.year_data[0].count || 0}}</text>
					</view>
				</view>
				<view class="data_in_item" v-if="pageType != 'property'">
					<image :src="'https://community.chuangxiangdianli.com/images/propertyImg/zongfeiyong.png'" mode=""></image>
					<view class="in_item_con">
						<text class="in_item_one">总费用(元)</text>
						<text class="in_item_tow">{{costDetails.year_data[0].cost || 0}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="fee_balance">
			<text v-if="pageType != 'property'">当前余额(元)</text>
			<text v-if="pageType != 'property'">{{costDetails.total_data.balance || 0}}</text>
		</view>

		<view class="fee_sub" @click="goToElectrPage">
			<text>立即缴费</text>
		</view>
	</view>
</template>

<script>
	import {
		getTime
	} from '@/utils/utils'
	export default {
		onLoad(option) {
			this.pageType = option.type 
			this.changeTitle(option.type)
		},
		onShow() {
			this.getCostDetails()
			this.feeTime = getTime()
			this.currYear = getTime().split('.')[0]
		},
		data() {
			return {
				// 页面类型 water - 水费 electric - 电费 property - 物业费
				pageType: 'water',
				// 费用类型
				type: 1,
				// 费用详情
				costDetails: null,
				// 时间
				feeTime: null,
				// 当前年份
				currYear: null
			};
		},
		methods: {
			// 动态设置导航栏title
			changeTitle(type) {
				let title;
				switch (type) {
					case 'electric':  
						title = '电费';
						this.type = 1;
						break;
					case 'water':
						title = '水费';
						this.type = 2;
						break;
					case 'property':
						title = '物业费';
						this.type = 3;
						break
				}
				uni.setNavigationBarTitle({
					title
				})
			},
			// 前往缴费记录页面
			goToPaymentRecord() {
				uni.navigateTo({
					url: '/property/paymentRecord/index?type=' + this.pageType
				})
			},
			// 前往缴费页面
			goToElectrPage() {
				// 水电
				if (this.pageType == 'water' || this.pageType == 'electric') { 
					let info = {
						meter_code: this.costDetails.meter_code,
						balance: this.costDetails.total_data.balance, 
						type: this.pageType
					} 
					uni.navigateTo({
						url: '/property/payElectr/index?info=' + JSON.stringify(info)
					})
				} else {
					// 物业
					uni.navigateTo({
						url: '/property/payProperty/index?type=' + this.pageType
					})
				}
			},
			// 前往统计数据页面
			goToStatistics() {
				uni.navigateTo({
					url: '/property/statistics/index?type=' + this.pageType
				})
			},
			// 获取费用详情
			getCostDetails() { 
				let _this = this
				_this.$mrequest2({
					url: 'Mini/bill/costDetails',
					method: 'POST',
					data: {
						// 表码
						code: 'KB51X29eoC32143281202',
						// 类型 1 电费 2 水费 3 物业费
						type: this.type
					}
				}).then(res => {
					_this.costDetails = res.data 
					console.log(_this.costDetails)
				})
			}
		}
	}
</script>

<style lang="scss">
	.df_fee_page {
		height: 100vh;
		background-color: #f7f8f9;

		.fee_page_head {
			position: relative;
			padding: 20rpx;
			height: 444rpx;
			background-color: #fff;

			.head_top {
				padding: 50rpx 0 0 50rpx;
				display: flex;
				justify-content: space-between;
				position: absolute;
				width: calc(100% - 50rpx);
				top: 20rpx;
				height: 189rpx;

				.head_top_fl {
					display: flex;
					flex: 1;

					.head_top_img {
						margin-right: 24rpx;
						width: 54rpx;
						height: 69rpx;
					}

					.head_top_z {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						font-size: 32rpx;
						height: 69rpx;
						line-height: 28rpx;
						color: #fff;
					}
				}

				.head_top_fr {
					position: relative;
					width: 154rpx;
					height: 68rpx;

					.fr_txt {
						position: absolute;
						left: 50%;
						top: 50%;
						color: #fff;
						transform: translate(-50%, -50%);
						font-size: 24rpx;
					}
				}
			}

			.head_con {
				display: flex;
				position: absolute;
				width: calc(100% - 50rpx);
				bottom: 0;
				height: 210rpx;

				.con_fl,
				.con_fr {
					flex: 1;
					text-align: center;
					color: #fff;

					text {
						display: block;
						font-size: 28rpx;
					}

					& text:nth-child(2) {
						margin: 10rpx 0 25rpx 0;
						font-size: 23rpx;
						color: #c7d6e4;
					}

					& text:nth-child(3) {
						font-size: 50rpx;
					}
				}
			}
		}

		.fee_nav {
			margin: 12rpx 0;
			display: flex;
			height: 140rpx;
			text-align: center;
			background-color: #fff;

			.nav_item {
				padding: 0 40rpx;
				display: flex;
				justify-content: space-around;
				width: 50%;
				line-height: 140rpx;
				font-size: 34rpx;
				font-size: 700;

				.nav_it_img {
					display: block;
					margin: auto;
					width: 60rpx;
					height: 60rpx;
				}
			}
		}

		.fee_data {
			height: 340rpx;
			background-color: #fff;

			.fee_data_tit {
				display: block;
				height: 115rpx;
				line-height: 115rpx;
				text-align: center;
				font-size: 32rpx;
				color: #0185e5;
				font-weight: 700;
			}

			.frr_data_in {
				display: flex;
				justify-content: space-around;
				height: 173rpx;

				.data_in_item {
					position: relative;
					width: 333rpx;

					.in_item_con {
						position: absolute;
						top: 50%;
						left: 50%;
						width: 200rpx;
						font-size: 26rpx;
						transform: translate(-50%, -50%);

						.in_item_one {
							padding-left: 20rpx;
							margin-bottom: 20rpx;
							display: block;
							border-left: 4rpx solid #0080e2;
						}

						.in_item_tow {
							margin-left: 20rpx;
							font-size: 36rpx;
							font-weight: 700;
						}
					}
				}

				.data_in_wyf {
					position: relative;
					margin: 0 20rpx;
					width: 100%;
					height: 100%;

					.data_in_item {
						position: absolute;
						top: 0;
						width: 333rpx;
						height: 100%;

						.in_item_con {
							position: absolute;
							top: 50%;
							left: 50%;
							width: 200rpx;
							font-size: 26rpx;
							transform: translate(-50%, -50%);

							.in_item_one {
								padding-left: 20rpx;
								margin-bottom: 20rpx;
								display: block;
								border-left: 4rpx solid #0080e2;
							}

							.in_item_tow {
								margin-left: 20rpx;
								font-size: 36rpx;
								font-weight: 700;
							}
						}
					}

					& .data_in_item:nth-child(3) {
						right: 0;
					}
				}
			}
		}

		.fee_balance {
			padding: 0 30rpx;
			display: flex;
			justify-content: space-between;
			height: 120rpx;
			line-height: 120rpx;
			font-size: 28rpx;
			color: #5D5D5D;

			& text:nth-child(2) {
				color: #FF4545;
			}

			.fee_time {
				margin: 0 auto;
				font-size: 28rpx;

				.fee_time_img {
					margin-right: 20rpx;
					width: 34rpx;
					height: 34rpx;
				}

				text {
					color: #787878;
				}
			}
		}

		.fee_sub {
			margin: 0 44rpx;
			height: 92rpx;
			line-height: 92rpx;
			text-align: center;
			color: #fff;
			font-size: 36rpx;
			background: #34B0FF;
			border-radius: 46rpx;
		}
	}
</style>
